<template>
  <div class="count">
    <!-- 组件中使用state数据1 直接去实例上的$store中取值 -->
    <h2>Count组件:{{ $store.state.count }}</h2>
    <h2>Count组件:{{ count1 }}</h2>
    <h2>Count组件:{{ num }}</h2>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      count: 70,
    };
  },
  mounted() {
    /* 
    观察发现:mapState辅助函数主要是为了帮助我们快速的生成要去vuex中读取属性的计算属性函数,并组成了一个对象
    mapState参数key接受两种写法
      1.数组:直接书写要读取的值
      2.对象: key是最终生成计算属性的名称,value是要去vuex中读取的值
    */
    const result = mapState(["count", "num"]);
    console.log(result, "result");
    console.log(result.count.call(this));
    console.log(result.num.call(this));
  },
  computed: {
    // ...mapState(["count", "num"]),
    ...mapState({ count1: "count", num: "num" }),
  },
  // computed: {
  //   count() {
  //     /* 组件中使用state数据2:可以书写一个计算属性,来拿到vuex中的数据,这样插值语法就比较简单，并且还有读取的缓存 */
  //     return this.$store.state.count;
  //   },
  //   num() {
  //     return this.$store.state.count;
  //   },
  // },
};
</script>

<style scoped>
.count {
  background: pink;
}
</style>